<!-- #layout name=blank -->
<style>
  .edit-label-btn {
    opacity: 0;
  }

  .panel:hover .edit-label-btn {
    opacity: 1;
  }
</style>
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Labels</h1>
    <div class="col-md-3 col-sm-4 col-xs-6 pull-right">
      <div class="row input-icon right">
        <i class="fa fa-search"></i>
        <input
          type="text"
          v-model="keyword"
          class="form-control"
          style="height: 32px;"
          placeholder="Enter your keyword"
        />
      </div>
    </div>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="row" v-if="!labels.length">
    <div
      class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12"
      style="margin-top: 40px;"
    >
      <div v-if="!isSearching" class="panel panel-default">
        <div class="panel-body">
          <blockquote>
            <p class="text-danger"
              >You can use label to create your multilanguage content.</p
            >
            <footer>You don't have a label yet</footer>
          </blockquote>
        </div>
        <div class="panel-footer">{{ Kooboo.text.common.empty }}</div>
      </div>
      <div v-else class="panel panel-default">
        <div class="panel-body">
          <blockquote>
            <p class="text-danger">{{ Kooboo.text.common.empty }}</p>
            <footer>No label found</footer>
          </blockquote>
        </div>
      </div>
    </div>
  </div>
  <div class="row label-list">
    <div
      v-for="(label, index) in labels"
      :key="index"
      class="col-md-4 col-sm-6 col-xs-12 item"
    >
      <div class="panel panel-default">
        <div class="panel-body">
          <button
            type="button"
            class="close"
            @click="removeLabel(label)"
            v-kb-tooltip="Kooboo.text.common.delete"
            ><i class="fa fa-close"></i
          ></button>
          <blockquote>
            <p v-if="label.values[defaultLang]"
              >{{ label.values[defaultLang] }}</p
            >
            <p v-else class="text-red">Empty</p>
            <footer>{{ label.name }}</footer>
          </blockquote>
          <a
            v-for="($data, $index) in label.refers"
            :key="$index"
            href="javascript:;"
            class="label label-sm kb-table-label-refer"
            :style="{ background: $data.bgColor }"
            @click="showRelationModal($data)"
            >{{ $data.text }}</a
          >
        </div>
        <div class="panel-footer clearfix">
          <span :title="Kooboo.text.common.lastModified">{{ label.date }}</span>
          <div class="pull-right">
            <button
              class="btn btn-xs blue edit-label-btn"
              @click="editLabel(label)"
              v-kb-tooltip="Kooboo.text.common.edit"
              ><i class="fa fa-pencil"></i
            ></button>
            <a
              class="btn btn-xs blue edit-label-btn"
              v-kb-tooltip="Kooboo.text.common.viewAllVersions"
              :href="label.versionUrl"
              target="_blank"
              ><i class="fa fa-clock-o"></i
            ></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <kb-relation-modal></kb-relation-modal>
  <div
    v-kb-modal="showEditModal"
    class="modal fade"
    data-backdrop="static"
    data-keyboard="fasle"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" @click="onHideEditModal"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">Edit label</h4>
        </div>
        <div class="modal-body">
          <template v-if="editingLabel">
            <div
              class="form-group"
              v-for="($data, $index) in editingContent"
              :key="$index"
            >
              <label v-if="$data.label">{{$data.label}}</label>
              <textarea
                class="form-control autosize"
                v-model="$data.value"
              ></textarea>
            </div>
          </template>
        </div>
        <div class="modal-footer">
          <button class="btn green" @click="onSaveEditModal">Save</button>
          <button class="btn gray" @click="onHideEditModal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/lib/waterfall.min.js",
      "/_Admin/Scripts/components/kbRelationModal.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/lib/jquery.textarea_autosize.min.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Contents/Labels.js"></script>
